<template>
  <div class="container">
    <div class="title">{{ year }}年各街镇基本数据公示</div>
    <dv-scroll-board
      @click="jump"
      :config="config"
      class="body"
    ></dv-scroll-board>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { getData } from "@/api";
import DvScrollBoard from "@components/scrollBoard/index.vue";
import { sendMessage } from "../../hooks/message";

let d = new Date();
const year = ref(d.getFullYear());
const data = ref<any[]>([]);
const config = reactive({
  header: ["街镇名称", "经营户数", "检测量", "不合格数", "合格率"],
  headerBGC: "none",
  oddRowBGC: "rgba(118, 191, 253, 0.1)",
  evenRowBGC: "transparent",
  columnWidth: ["110"],
  data: [],
  align: ["center", "center", "center", "center", "center"],
});
const initData = async () => {
  const res = await getData();
  // console.log(res);
  data.value = [];
  let { data: arr } = res;
  arr.forEach((item: any) => {
    let arr: any[] = [];
    arr[0] = item.zjname;
    arr[1] = item.jyhsum;
    arr[2] = item.jcl;
    arr[3] = `<span style="color:#1AED83;cursor:pointer;">${item.bhgsum}</span>`;
    arr[4] = parseFloat(item.hglv.replace("%", "")).toFixed(2) + "%";
    data.value.push(arr);
  });
  config.data = data.value as any;
};
const jump = (arg: { row: any; columnIndex: any }) => {
  const { row, columnIndex } = arg;
  if (columnIndex !== 3) {
    return;
  }
  sendMessage("jump", "/system/ysjcsjyxcz", {
    jdname: row[0],
  });
};
onMounted(async () => {
  await initData();
});
</script>
<style scoped lang="scss">
.container {
  min-height: 0px;
  width: 100%;
  height: 100%;
  background-image: url("../../assets/组 7704.png");
  background-size: cover;
  border: 1px solid #172f7e;
  display: flex;
  flex-direction: column;
  .title {
    width: 100%;
    height: 31px;
    font-size: 20px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    padding-top: 3px;
    flex: 0 0 auto;
  }
  .body {
    flex-grow: 1;
  }
}
</style>
